<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @close="handleCancel"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span style="display: inline-block; width: calc(100% - 51px); padding-right: 10px; text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height: 20px; width: 20px; border: 0px"></a-button>
        </span>
      </div>
    </template>

    <div style="margin-bottom: 20px; display: flex; justify-content: flex-start">
      <a-button type="primary" @click="handleAddCategory">添加</a-button>
    </div>

    <a-table
      ref="table"
      size="middle"
      rowKey="dataId"
      :columns="listColumns"
      :dataSource="categoryList"
      :loading="confirmLoading"
      :pagination="false"
    >
      <template slot="categoryImg" slot-scope="text, record">
        <img style="height: 60px; padding: 5px" :src="record.categoryImg" :preview="[].push(record.categoryImg)">
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="handleEditCategory(record)" >编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteCategory(record.dataId)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </a-table>

    <category-form-modal ref="CategoryForm" @ok="CategoryFormOk"></category-form-modal>
  </a-drawer>
</template>

<script>
  import { getAction, postAction, deleteAction } from '@/api/manage'
  import CategoryFormModal from './CategoryFormModal'
  import { mapGetters } from 'vuex'

  export default {
    name: 'CategoryModal',
    components: {CategoryFormModal},
    data() {
      return {
        drawerWidth: 900,
        disableSubmit: false,
        title: '操作',
        visible: false,
        confirmLoading: false,
        categoryList: [],
        listColumns: [
          {
            title: '分类名称',
            align: 'center',
            dataIndex: 'categoryName',
            width: 120,
          },
          {
            title: '分类图片',
            align: 'center',
            dataIndex: 'categoryImg',
            scopedSlots: { customRender: 'categoryImg' },
          },
          {
            title: '分类描述',
            align: 'center',
            dataIndex: 'categoryDesc',
            scopedSlots: { customRender: 'categoryDesc' },
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 170
          }
        ]
      }
    },
    created() {
    },
    methods: {
      ...mapGetters(['doctorId', 'orgCode']),
      edit() {
        this.visible = true
        this.handleGetServiceCategory()
        this.resetScreenSize()
      },
      handleGetServiceCategory() {
        getAction('107/03/1070306', {doctorId: this.doctorId(), orgCode: this.orgCode()}).then(res => {
          if (res.success) {
            this.categoryList = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize() {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 900
        }
      },
      //窗口最大化切换
      toggleScreen() {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth
        } else {
          this.modalWidth = 800
        }
        this.modaltoggleFlag = !this.modaltoggleFlag
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.disableSubmit = false
      },
      handleDeleteCategory(id) {
        deleteAction('107/03/1070308', {categoryId: id, doctorId: this.doctorId(), orgCode: this.orgCode()}).then(res => {
          if (res.success) {
            this.$message.success('删除成功')
            this.handleGetServiceCategory()
          } else {
            this.$message.warning(res.message);
          }
        })
      },
      handleAddCategory() {
        this.$refs.CategoryForm.add()
        this.$refs.CategoryForm.title = '添加服务分类'
      },
      handleEditCategory(record) {
        this.$refs.CategoryForm.edit(record)
        this.$refs.CategoryForm.title = '编辑服务分类'
      },
      CategoryFormOk() {
        this.handleGetServiceCategory()
      }
    }
  }
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>